<template>
	<view class="ayi-dialog__wrapper">
		<ayi-popup v-model="visible" direction="center" :close-on-click-modal="closeOnClickModal" :size="width" :border-radius="16" :padding="0" @close="onClose">
			<view class="ayi-dialog">
				<!-- 顶部 -->
				<view class="ayi-dialog__header" v-if="title">
					<text class="ayi-dialog__title">{{ title }}</text>
				</view>
				<!-- 内容 -->
				<view class="ayi-dialog__container">
					<view class="ayi-dialog__message">
						<slot></slot>
					</view>
				</view>
				<!-- 底部 -->
				<view class="ayi-dialog__footer" v-if="slots.footer">
					<slot name="footer"> </slot>
				</view>
				<!-- 关闭按钮 -->
				<view class="ayi-dialog__close" v-if="showCloseBtn" @click="close">
					<ayi-icon class="close" name="close" @click.stop="close"></ayi-icon>
				</view>
			</view>
		</ayi-popup>
	</view>
</template>
<script lang="ts" setup>
	/**
 * @description 对话框
 * @property {Boolean} modelValue 是否可见
 * @property {String} title 标题
 * @property {String} width 宽度，默认80%
 * @property {Boolean} closeOnClickModal 点击遮罩层是否关闭，默认true
 * @property {Boolean} showCloseBtn 显示关闭按钮
 */
	import { ref, watch, useSlots } from "vue"
	import ayiPopup from "../yll1024335892-ayi-popup/index.vue"
	import ayiIcon from "../yll1024335892-ayi-icon/index.vue"
	const props = defineProps({
		modelValue: {
			type: Boolean,
			required: true
		},
		title: String,
		width: {
			type: String,
			default: "80%"
		},
		closeOnClickModal: {
			type: Boolean,
			default: true
		},
		showCloseBtn: Boolean
	})
	const emit = defineEmits(["update:modelValue", "close"])
	const slots = useSlots()
	const visible = ref<boolean>(false)
	watch(
		() => props.modelValue,
		(val : boolean) => {
			visible.value = val
		},
		{
			immediate: true
		}
	)
	function open() {
		visible.value = true
	}
	function close() {
		visible.value = false
	}
	function onClose() {
		console.log("建议管理")
		emit("update:modelValue", false)
		emit("close")
	}
</script>
<style lang="scss" scoped>
	@import "./index.scss";
</style>